import type { Directive } from 'vue'

/**
 * v-select-all：当元素获取焦点时自动选中内容
 */
const selectAll: Directive<HTMLInputElement> = {
  mounted(el) {
    // 如果是 el-input，获取内部的原生 input
    const input = el.querySelector('input') || el
    if (!input) return

    input.addEventListener('focus', () => {
      // 让选中操作在下一个事件循环执行，避免焦点覆盖
      setTimeout(() => {
        input.select()
      })
    })
  },
  unmounted(el) {
    const input = el.querySelector('input') || el
    if (input) {
      input.removeEventListener('focus', () => input.select())
    }
  },
}

export default selectAll
